<template>

    <div>
        <el-row type="left">
            <el-popover
                placement='top-start'
                :title="'灯光'"
                trigger='hover'
                :content="fiber.title + ' ' + fiber.subTitle">
                <el-button circle :type='fiber.type' :icon='fiber.icon'
                           slot='reference'></el-button>
            </el-popover>
            <label> 潜器本体光纤 </label>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'SubmersibleFiberStatus',
    data() {
        return {
            success: {
                type: 'success',
                title: '连接正常',
                subTitle: [],
                icon: 'el-icon-check'
            },
            error: {
                type: 'danger',
                title: '断开连接',
                subTitle: [],
                icon: 'el-icon-warning'
            },
            warning: {
                type: 'warning',
                title: '正在连接',
                subTitle: [],
                icon: 'el-icon-loading'
            },
            info: {
                type: 'danger',
                title: '故障',
                subTitle: [],
                icon: 'el-icon-close'
            },
            fiber: {
                type: '',
                title: '',
                subTitle: ''
            }
        };
    },
    mounted() {
        var time = this.getTime();
        this.fiber.type = this.warning.type;
        this.fiber.icon = this.warning.icon;
        this.fiber.title = this.warning.title;
        this.fiber.subTitle = time;
        setInterval(this.addData, 3000);
    },
    methods: {
        getTime: function() {
            var ts = arguments[0] || 0;
            var t, h, i, s;
            t = ts ? new Date(ts * 1000) : new Date();
            h = t.getHours();
            i = t.getMinutes();
            s = t.getSeconds();
            // 定义时间格式
            return (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
        },
        // 添加实时数据
        addData: function() {
            // 从接口获取数据并添加到数组
            this.$axios.get(this.GLOBAL.serverIp + '/api/submersibleFiberStatus/').then((res) => {
                // console.log(res.data.status)
                if (res.data.status === 1) {
                    this.setIcon(this.success)
                }
                else {
                    this.setIcon(this.info)
                }
                // this.fiber.title=res.data.status
            }).catch((error)=> {
                this.setIcon(this.error)
            });
        },
        setIcon: function(obj) {
            var time = this.getTime()
            this.fiber.type = obj.type
            this.fiber.icon = obj.icon
            this.fiber.title = obj.title
            this.fiber.subTitle = time
        }
    }
};
</script>

<style scoped>

.el-row {
    padding: 10px;
}
</style>
